import React, { useState } from 'react';
import { List, Avatar, Button, Drawer, Input, message } from 'antd';

const CommentSystem = () => {
  const [commentsList, setCommentsList] = useState([]);
  const [comment, setComment] = useState('');
  const [replyContent, setReplyContent] = useState('');
  const [visible, setVisible] = useState(false);
  const [currentCommentIndex, setCurrentCommentIndex] = useState(null);
  const [editCommentIndex, setEditCommentIndex] = useState(null);
  const [editReplyIndex, setEditReplyIndex] = useState(null);
  const [editCommentValue, setEditCommentValue] = useState('');
  const [editReplyValue, setEditReplyValue] = useState('');

  // 添加评论
  const handleAddComment = () => {
    if (comment) {
      setCommentsList([...commentsList, { content: comment, replies: [], username: `User${commentsList.length + 1}`, time: new Date().toLocaleString() }]);
      setComment('');
    }
  };

  // 删除一级评论
  const handleDeleteComment = (index) => {
    const updatedCommentsList = commentsList.filter((_, i) => i !== index);
    setCommentsList(updatedCommentsList);
    message.success('评论已删除');
  };

  // 修改一级评论
  const handleEditComment = (index) => {
    const updatedComments = [...commentsList];
    updatedComments[index].content = editCommentValue;
    setCommentsList(updatedComments);
    setEditCommentIndex(null);
    setEditCommentValue('');
    message.success('评论已修改');
  };

  // 删除二级评论
  const handleDeleteReply = (commentIndex, replyIndex) => {
    const updatedCommentsList = [...commentsList];
    updatedCommentsList[commentIndex].replies.splice(replyIndex, 1);
    setCommentsList(updatedCommentsList);
    message.success('回复已删除');
  };

  // 修改二级评论
  const handleEditReply = (commentIndex, replyIndex) => {
    const updatedComments = [...commentsList];
    updatedComments[commentIndex].replies[replyIndex].content = editReplyValue;
    setCommentsList(updatedComments);
    setEditReplyIndex(null);
    setEditReplyValue('');
    message.success('回复已修改');
  };

  // 添加二级评论
  const handleAddReply = () => {
    if (replyContent && currentCommentIndex !== null) {
      const updatedComments = [...commentsList];
      updatedComments[currentCommentIndex].replies.push({ content: replyContent, username: `UserReply${updatedComments[currentCommentIndex].replies.length + 1}`, time: new Date().toLocaleString() });
      setCommentsList(updatedComments);
      setReplyContent('');
    }
  };

  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
    setCurrentCommentIndex(null);
    setReplyContent('');
    setEditCommentIndex(null);
    setEditCommentValue('');
    setEditReplyIndex(null);
    setEditReplyValue('');
  };

  return (
    <div>
      <Button type="primary" onClick={showDrawer}>评论</Button>

      <Drawer
        title="评论和回复"
        placement="right"
        onClose={onClose}
        open={visible}
        width={400}
      >
        <Input.TextArea 
          value={comment} 
          onChange={(e) => setComment(e.target.value)} 
          placeholder="添加评论" 
        />
        <Button type="primary" onClick={handleAddComment} style={{ marginTop: '10px' }}>提交评论</Button>

        <h4 style={{ marginTop: '20px' }}>已有评论：</h4>
        <List
          dataSource={commentsList}
          renderItem={(commentData, index) => (
            <List.Item key={index}>
              <List.Item.Meta
                avatar={<Avatar src="https://via.placeholder.com/30" />}
                title={
                  editCommentIndex === index ? (
                    <Input 
                      value={editCommentValue} 
                      onChange={(e) => setEditCommentValue(e.target.value)} 
                      onPressEnter={() => handleEditComment(index)} 
                      placeholder="修改评论" 
                    />
                  ) : (
                    <span>{commentData.username}</span>
                  )
                }
                description={
                  <div>
                    {editCommentIndex === index ? (
                      <Button type="link" onClick={() => handleEditComment(index)}>保存</Button>
                    ) : (
                      <div>
                        <p>{commentData.content}</p>
                        <small>{commentData.time}</small>
                        <Button type="link" onClick={() => { setEditCommentIndex(index); setEditCommentValue(commentData.content); }}>修改</Button>
                        <Button type="link" onClick={() => handleDeleteComment(index)}>删除</Button>
                        <Button type="link" onClick={() => { setCurrentCommentIndex(index); setReplyContent(''); }}>回复</Button>
                      </div>
                    )}
                    
                    {currentCommentIndex === index && (
                      <div style={{ marginTop: '10px' }}>
                        <Input.TextArea 
                          value={replyContent}
                          onChange={(e) => setReplyContent(e.target.value)}
                          placeholder="添加回复"
                          style={{ marginBottom: '10px' }}
                        />
                        <Button type="primary" onClick={handleAddReply}>回复</Button>
                        {commentData.replies.length > 0 && (
                          <List
                            dataSource={commentData.replies}
                            renderItem={(reply, replyIndex) => (
                              <List.Item style={{ paddingLeft: '20px' }} key={replyIndex}>
                                <List.Item.Meta
                                  avatar={<Avatar src="https://via.placeholder.com/30" />}
                                  title={
                                    editReplyIndex === replyIndex && currentCommentIndex === index ? (
                                      <Input 
                                        value={editReplyValue} 
                                        onChange={(e) => setEditReplyValue(e.target.value)} 
                                        onPressEnter={() => handleEditReply(index, replyIndex)} 
                                        placeholder="修改回复" 
                                      />
                                    ) : (
                                      <span>{reply.username}</span>
                                    )
                                  }
                                  description={
                                    <div>
                                      {editReplyIndex === replyIndex && currentCommentIndex === index ? (
                                        <Button type="link" onClick={() => handleEditReply(index, replyIndex)}>保存</Button>
                                      ) : (
                                        <div>
                                          <p>{reply.content}</p>
                                          <small>{reply.time}</small>
                                          <Button type="text" onClick={() => { setEditReplyIndex(replyIndex); setEditReplyValue(reply.content); }}>修改</Button>
                                          <Button type="text" onClick={() => handleDeleteReply(index, replyIndex)}>删除</Button>
                                        </div>
                                      )}
                                    </div>
                                  }
                                />
                              </List.Item>
                            )}
                          />
                        )}
                      </div>
                    )}
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Drawer>
    </div>
  );
};

export default CommentSystem;